<template>
  <h3>setup 语法糖</h3>
  <div>
    <p>{{ str }}</p>
    <p>{{ str2 }}</p>
    <button type="button" @click="changeStr">修改str</button>
    <myComp />
  </div>
</template>

<!-- 因为使用了setup语法糖，组件名称定义需要再写一个script标签 -->
<script>
export default {
  name: 'diyDemo5'
}
</script>

<!-- 下面的写法是setup语法糖 -->
<script setup>
import { ref } from 'vue'
import myComp from '../study2/diyDemo6.vue'

// 普通变量
let str = '我是组合式api的普遍变量'

// 响应式变量
const str2 = ref('我是响应式变量')

const changeStr = () => {
  console.log('changeStr')
  str = '我不能响应式显示UI的效果，修改我没用'
  console.log(str)
  str2.value = '我是响应变量，我可以出发UI的更新'

  fun1()
}

const fun1 = () => {
  console.log('fun1')
}
</script>

<style lang="scss" scoped>
h3 {
  color: rgb(195, 198, 35);
  font-size: large;
}
</style>
